﻿@using AntDesign.Core.JsInterop.Modules.Components
@inherits AntDesignTestBase
@code {
    public Menu_Horizontal_Tests()
    {
        JSInterop.Setup<AntDesign.JsInterop.DomRect>(JSInteropConstants.GetBoundingClientRect, _ => true)
            .SetResult(new AntDesign.JsInterop.DomRect());
        JSInterop.Setup<OverlayPosition>(JSInteropConstants.OverlayComponentHelper.AddOverlayToContainer, _ => true)
            .SetResult(new OverlayPosition() { Top = 0, Left = 0, ZIndex = 5000, Placement = Placement.BottomLeft });
    }
    
    private RenderFragment GetBasicHorizontalRender()
    {
        return @<Menu Mode=MenuMode.Horizontal>
                <MenuItem>Navigation One</MenuItem>
                <SubMenu Title="Navigation Two">
                    <MenuItemGroup Title="Item 1">
                        <MenuItem Key="nest:2:1">Option 1</MenuItem>
                        <MenuItem>Option 2</MenuItem>
                    </MenuItemGroup>
                    <MenuDivider />
                    <MenuItemGroup Title="Item 2">
                        <MenuItem>Option 3</MenuItem>
                        <SubMenu Title="Option 4">
                            <MenuItem Key="nest:2:2:4">Option 1</MenuItem>
                            <SubMenu Title="Option 5">
                                <MenuItem Key="nest:2:2:4:5:1">Option 1</MenuItem>
                                <MenuItem Key="nest:2:2:4:5:2">Option 2</MenuItem>
                            </SubMenu>
                        </SubMenu>
                    </MenuItemGroup>
                </SubMenu>
                <MenuItem>Navigation Three</MenuItem>
            </Menu>;
    }


    [Fact]
    public void Basic_horizontal_top_nested_menu_renders_correctly()
    {
        //Arrange

        var cut = Render<AntDesign.Menu>(GetBasicHorizontalRender());
        //Act
        //Assert
        cut.MarkupMatches(@"
            <ul class=""ant-menu ant-menu-root ant-menu-light ant-menu-horizontal"" id:ignore direction=""ltr"" role=""menu"">        
		        <li class=""ant-menu-item"" role=""menuitem"" style="""">
			        <span class=""ant-menu-title-content"">
                        Navigation One	
			        </span>
		        </li>       
                <li class=""ant-menu-submenu ant-menu-submenu-horizontal"" role=""menuitem"" style=""position:relative;"">    
                    <div class=""ant-menu-submenu-title"" role=""button"">
                        <span>
                            Navigation Two
                        </span>
                    </div>
                </li>
        		<li class=""ant-menu-item"" role=""menuitem"" style="""">
        			<span class=""ant-menu-title-content"">
                        Navigation Three	
			        </span>
		        </li>
            </ul>");             
    }

    [Fact]
    public async Task Basic_horizontal_first_nested_menu_with_groups_renders_correctly()
    {
        //Arrange

        var cut = Render<AntDesign.Menu>(GetBasicHorizontalRender());
        //Act
        var topExpandable = cut.FindComponent<AntDesign.Internal.SubMenuTrigger>();        
        await cut.InvokeAsync(() => topExpandable.Instance.Show());
        var topOverlay = topExpandable.FindComponent<AntDesign.Internal.Overlay>();
        //Assert
        topOverlay.MarkupMatches(@"
            <div class=""ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light ant-menu-submenu-placement-bottomLeft ant-menu-submenu-light"" style:ignore>                    
                <ul direction=""ltr"" class=""ant-menu ant-menu-sub ant-menu-light ant-menu-vertical"" style="""" role=""menu"">                        
                    <li class=""ant-menu-item-group"">
                        <div class=""ant-menu-item-group-title"">
                            Item 1    
                        </div>
                        <ul class=""ant-menu-item-group-list"">        
		                    <li class=""ant-menu-item"" role=""menuitem"" style="""">
			                    <span class=""ant-menu-title-content"">
                                    Option 1	
			                    </span>
		                    </li>            
		                    <li class=""ant-menu-item"" role=""menuitem"" style="""">
			                    <span class=""ant-menu-title-content"">
                                    Option 2	
			                    </span>
		                    </li>
                        </ul>
                    </li>
                    <li class=""ant-menu-item-divider""></li>
                    <li class=""ant-menu-item-group"">
                        <div class=""ant-menu-item-group-title"">
                            Item 2
                        </div>
                        <ul class=""ant-menu-item-group-list"">        
		                    <li class=""ant-menu-item"" role=""menuitem"" style="""">
			                    <span class=""ant-menu-title-content"">
                                    Option 3	
			                    </span>
		                    </li>
                            <li class=""ant-menu-submenu ant-menu-submenu-vertical"" role=""menuitem"" style=""position:relative;"">    
                                <div class=""ant-menu-submenu-title"" role=""button"">
                                    <span>
                                        Option 4
                                    </span>
                                    <i class=""ant-menu-submenu-arrow""></i>
                                </div>                
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        ");             
    }

    [Fact]
    public async Task Basic_horizontal_second_nested_menu_renders_correctly()
    {
        //Arrange

        var cut = Render<AntDesign.Menu>(GetBasicHorizontalRender());
        //Act
        var topExpandable = cut.FindComponent<AntDesign.Internal.SubMenuTrigger>();        
        await cut.InvokeAsync(() => topExpandable.Instance.Show());        
        var midExpandable = topExpandable.FindComponent<AntDesign.Internal.SubMenuTrigger>();
        await topExpandable.InvokeAsync(() => midExpandable.Instance.Show());
        var midOverlay = midExpandable.FindComponent<AntDesign.Internal.Overlay>();
        //Assert        
        midOverlay.MarkupMatches(@"
            <div style:ignore class=""ant-menu-submenu   ant-menu-submenu-popup ant-menu ant-menu-light ant-menu-submenu-placement-rightTop ant-menu-submenu-light"">
                <ul direction=""ltr"" class=""ant-menu ant-menu-sub ant-menu-light ant-menu-vertical"" style="""" role=""menu"">
                    <li class=""ant-menu-item"" role=""menuitem"" style="""">
                		<span class=""ant-menu-title-content"">
                            Option 1	
                		</span>
		            </li>
                    <li class=""ant-menu-submenu ant-menu-submenu-vertical"" role=""menuitem"" style=""position:relative;"">
                        <div class=""ant-menu-submenu-title"" role=""button"">
                            <span>
                                Option 5
                            </span>
                            <i class=""ant-menu-submenu-arrow""></i>
                        </div>                
                    </li>
                </ul>
            </div>");           
    }

    [Fact]
    public async Task Basic_horizontal_third_nested_menu_renders_correctly()
    {
        //Arrange

        var cut = Render<AntDesign.Menu>(GetBasicHorizontalRender());
        //Act
        var topExpandable = cut.FindComponent<AntDesign.Internal.SubMenuTrigger>();        
        await cut.InvokeAsync(() => topExpandable.Instance.Show());        
        var midExpandable = topExpandable.FindComponent<AntDesign.Internal.SubMenuTrigger>();
        await topExpandable.InvokeAsync(() => midExpandable.Instance.Show());
        var bottomExpandable = midExpandable.FindComponent<AntDesign.Internal.SubMenuTrigger>();
        await midExpandable.InvokeAsync(() => bottomExpandable.Instance.Show());
        var bottomOverlay = bottomExpandable.FindComponent<AntDesign.Internal.Overlay>();              
        //Assert        
        bottomOverlay.MarkupMatches(@"
            <div style:ignore class=""ant-menu-submenu   ant-menu-submenu-popup ant-menu ant-menu-light ant-menu-submenu-placement-rightTop ant-menu-submenu-light"">
                <ul direction=""ltr"" class=""ant-menu ant-menu-sub ant-menu-light ant-menu-vertical"" style="""" role=""menu"">
                    <li class=""ant-menu-item"" role=""menuitem"" style="""">
                		<span class=""ant-menu-title-content"">
                            Option 1	
                		</span>
		            </li>
                    <li class=""ant-menu-item"" role=""menuitem"" style="""">
                		<span class=""ant-menu-title-content"">
                            Option 2
                		</span>
		            </li>
                </ul>
            </div>");
    }

}
